<template>
  <div>
    <div style="position:relative;">
      <div :style="{height:n_he+n_top+'px'}">
        <img
          src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC8xMDliOGYzZmU4ZmE4NjBmNjA5ZjFiZWI0MDRhMDYyZS05MC53ZWJw.webp"
          style="width:100%;"
        />
      </div>
      <div
        style="width:100%; height:100%;background:rgba(0,0,0,.3);position:absolute; left:0;top:0; padding-top:150px;box-sizing: border-box; text-align:center;"
      >
        <h2 style="font-size:48px;color:#fff; padding-top:38px;">旅游套餐</h2>
        <p
          style="font-size:18px; color:#fff; padding:22px 0px;"
        >CITY TOURS / TOUR TICKETS / TOUR GUIDES</p>
        <div style="background:#fff; width:100%;" ref="ds">
          <div style="text-align:center; padding-top:100px;">
            <h3 style="color:#595959; font-size:22px;">巴黎旅游景点</h3>
            <p
              style="color:#a9a9a9; font-size:16px; padding:12px 0px 22px 0px"
            >Quisque at tortor a libero posuer</p>
            <div class="ji">
              <a href="#/no2/list_type/所有景点">所有景点</a>
              <a href="#/no2/list_type/第2区">第2区</a>
              <a href="#/no2/list_type/第3区">第3区</a>
              <a href="#/no2/list_type/第5区">第5区</a>
              <a href="#/no2/list_type/第8区">第8区</a>
              <a href="#/no2/list_type/第9区">第9区</a>
            </div>
            <div>
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n_he: "",
      n_top: ""
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.$refs.ds.offsetTop);
      this.n_he = this.$refs.ds.offsetHeight;
      this.n_top = this.$refs.ds.offsetTop;
    });
  },
  updated() {
    this.$nextTick(() => {
      console.log(this.$refs.ds.offsetTop);
      this.n_he = this.$refs.ds.offsetHeight;
      this.n_top = this.$refs.ds.offsetTop;
    });
  }
};
</script>